<!--
 * @Author: your name
 * @Date: 2020-06-01 17:30:55
 * @LastEditTime: 2020-06-16 17:40:58
 * @LastEditors: Please set LastEditors
 * @Description: 个人中心
 * @FilePath: \IM_Web\im_web\src\components\personalCenter\personalCenter.vue
--> 
<template>
    <div>
        <div class="personal" :style="{overflowY:isSearchCompany||isAttestCompany?'hidden':''}">
            <div class="flex justify_between align_center">
                <div style class="flex basis_lg justify_between">
                    <div>
                        <div class="my_qrcode">我的二维码</div>
                        <div>ID:{{userInfo.accid}}</div>
                    </div>
                    <div class="img_code" :ref="`qrcode_${userInfo.accid}`"></div>
                </div>
                <div>
                    <Button
                        type="primary"
                        class="join_btn"
                        @click="isSearchCompany = !isSearchCompany"
                    >加入企业</Button>
                </div>
            </div>
            <div class="enterprise">
                <div class="enterprise_title">我的企业</div>
                <Scroll :on-reach-bottom="handleReachBottom" height="430">
                    <div
                        class="flex justify_between align_center enterprise_item"
                        v-for="item in companyList"
                        :key="item.id"
                    >
                        <div style class="flex basis_lg justify_between">
                            <div class="basis_sm">
                                <div class="my_qrcode">{{item.full_name}}</div>
                                <div>ID:{{item.enterprise_id}}</div>
                            </div>
                            <!-- // 认证状态:(0为未认证,1为已认证,2为审核中,默认为0), -->
                            <!-- status: 0为待通过,1为已通过 -->
                            <div
                                class="error"
                            >{{item.status==='0'?"受邀加入":item.auth_state === "1"?"":item.auth_state==="2"?"审核中":"未认证"}}</div>
                            <div class="img_code" :ref="`qrcode_${item.id}`"></div>
                        </div>
                        <div>
                            <div
                                class="flex justify_between"
                                style="width:230px;"
                                v-if="item.status ==='0'"
                            >
                                <!-- v-if="item.status ==='0'" -->
                                <div>
                                    <Poptip
                                        confirm
                                        title="同意加入该企业？"
                                        @on-ok="ok({...item,result:1})"
                                        @on-cancel="cancel"
                                    >
                                        <Button type="primary" class="agree_btn">同意</Button>
                                    </Poptip>
                                </div>
                                <div>
                                    <Poptip
                                        confirm
                                        title="拒绝该企业的邀请？"
                                        @on-ok="ok({...item,result:2})"
                                        @on-cancel="cancel"
                                    >
                                        <Button type="error" class="refuse_btn">拒绝</Button>
                                    </Poptip>
                                </div>
                            </div>
                            <Button
                                type="primary"
                                class="approve_btn"
                                @click="isAttestCompany = !isAttestCompany;companyItem=item"
                                v-else-if="item.auth_state === '0'"
                            >认证</Button>
                            <!-- v-else-if="item.auth_state === '0'" -->
                        </div>
                    </div>
                </Scroll>

                <!-- <div class="flex justify_between align_center enterprise_item">
                    <div style class="flex basis_lg justify_between">
                        <div>
                            <div class="my_qrcode">淘宝（厦门）贸易有限公司</div>
                            <div>ID:ABKSJKDJK425222</div>
                        </div>
                        <div class></div>
                        <div class="img_code"></div>
                    </div>
                    <div>
                        <Button type="primary">认证</Button>
                    </div>
                </div>-->
                <!-- <div class="flex justify_between align_center enterprise_item">
                    <div style class="flex basis_lg justify_between">
                        <div>
                            <div class="my_qrcode">天子游（厦门）贸易有限公司</div>
                            <div>ID:ABKSJKDJK425222</div>
                        </div>
                        <div class="error">审核中</div>
                        <div class="img_code"></div>
                    </div>
                <div>-->
                <!-- <Button type="primary">认证</Button> -->
                <!-- </div>
                </div>-->
                <!-- <div class="flex justify_between align_center enterprise_item">
                    <div style class="flex basis_lg justify_between">
                        <div>
                            <div class="my_qrcode">天子游（厦门）贸易有限公司</div>
                            <div>ID:ABKSJKDJK425222</div>
                        </div>
                        <div class="error">受邀加入</div>
                        <div class="img_code"></div>
                    </div>
                    <div class="flex justify_between" style="width:230px;">
                        <div>
                            <Button type="primary" class="agree_btn">同意</Button>
                        </div>
                        <div>
                            <Button type="error" class="refuse_btn">拒绝</Button>
                        </div>
                    </div>
                </div>-->
            </div>
            <transition name="slide-fade">
                <div class="SearchCompany" v-if="isSearchCompany">
                    <SearchCompany />
                </div>
            </transition>
            <transition name="slide-fade">
                <div class="SearchCompany" v-if="isAttestCompany">
                    <AttestCompany :item="companyItem" />
                </div>
            </transition>
            <div class="close" @click="closeMyModal" v-show="isSearchCompany||isAttestCompany">
                <Icon type="ios-close" />
            </div>
        </div>
    </div>
</template>

<script>
import SearchCompany from "../searchCompany/searchCompany";
import AttestCompany from "../attestCompany/attestCompany";
import QRCode from "qrcodejs2";
export default {
    props: {},
    data() {
        return {
            isSearchCompany: false,
            isAttestCompany: false,
            companyList: [],
            userInfo: {},
            url: "",
            companyItem: null
        };
    },
    computed: {},
    created() {
        this.userInfo = JSON.parse(sessionStorage.getItem("info"));
        this.getEnterprises();
    },
    mounted() {
        this.$nextTick(() => {
            let content = `${this.url}?invite_code=${this.userInfo.invite_code}&qrcode=user&name=${this.userInfo.nickname}`;
            this.qrCodeCreate(`qrcode_${this.userInfo.accid}`, "user", content);
        });
    },
    watch: {},
    methods: {
        closeMyModal() {
            this.isSearchCompany = false;
            this.isAttestCompany = false;
        },
        handleReachBottom() {
            console.log(1111);
        },
        getEnterprises() {
            let params = {
                page: 1,
                page_size: 10
            };
            this.http.enterprises(params).then(res => {
                console.log(res);
                if (res.data.errno === "000") {
                    this.companyList = [
                        ...this.companyList,
                        ...res.data.result.data
                    ];
                    this.$nextTick(() => {
                        for (let i = 0; i < res.data.result.data.length; i++) {
                            let content = `${this.url}?invite_code=${this.userInfo.invite_code}&qrcode=enterprise&id=${res.data.result.data[i].enterprise_id}&name=${res.data.result.data[i].full_name}`;
                            this.qrCodeCreate(
                                `qrcode_${res.data.result.data[i].id}`,
                                "list",
                                content
                            );
                        }
                    });
                }
            });
        },
        ok(params) {
            // console.log(params);
            this.handleInvite(params.enterprise_id, params.result);
        },
        cancel() {},
        handleInvite(id, result) {
            let params = { enterprise_id: id, operate: result };
            this.http.companyHandle(params).then(res => {
                console.log(res);
                this.$Message.destroy();
                res.data.errno === "000"
                    ? this.$Message.success(res.data.errmsg)
                    : this.$Message.error(res.data.errmsg);
            });
        },
        qrCodeCreate(qrCodeDiv, type, content) {
            // console.log(this.$refs[qrCodeDiv][0]);
            let _content = content;
            if (type === "user") {
                new QRCode(this.$refs[qrCodeDiv], {
                    text: _content,
                    width: 76,
                    height: 76,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
                });
            } else {
                new QRCode(this.$refs[qrCodeDiv][0], {
                    text: _content,
                    width: 76,
                    height: 76,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
                });
            }
        }
    },
    components: {
        SearchCompany,
        AttestCompany
    }
};
</script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all 0.5s ease;
}
.slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}
</style>
<style scoped lang="less">
.personal {
    position: relative;
    border-top: 1px solid #ddd;
    padding: 45px 80px;
    padding-bottom: 0;
    box-sizing: border-box;
    height: 723px;
    max-height: 723px;
    overflow: hidden;
    overflow-y: auto;
    text-align: left;
    font-size: 20px;
    .join_btn,
    .approve_btn {
        width: 230px;
        height: 50px;
        background: #47da70;
        border-radius: 10px;
        border: 0;
        font-size: 24px;
    }
    .img_code {
        width: 76px;
        height: 76px;
        // background: url("../../assets/images/qr_code.svg");
        // background-size: 100% 100%;
    }
    .my_qrcode {
        font-size: 18px;
        font-weight: bold;
    }
    .enterprise {
        margin-top: 102px;
        .enterprise_title {
            font-size: 28px;
            color: #0098fb;
        }
        .enterprise_item {
            padding: 20px 0;
            box-sizing: border-box;
            // border-bottom: 1px solid #ddd;
            .approve_btn,
            .agree_btn {
                background: #2396f7;
            }
            .agree_btn,
            .refuse_btn {
                width: 110px;
                height: 50px;
                border-radius: 10px;
                font-size: 20px;
            }
            .my_qrcode {
                font-weight: normal;
            }
            .error {
                color: #ed4014;
            }
        }
    }
    .SearchCompany {
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;
        background: #fff;
        top: 0;
        left: 0;
    }
    .close {
        position: absolute;
        width: 40px;
        height: 40px;
        font-size: 40px;
        z-index: 5;
        top: 0;
        right: 10px;
    }
}
.personal::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}

.personal::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #409eff;
}

.personal::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    // border-radius: 10px;
    // background: #fff;
    background: rgba(0, 0, 0, 0);
}
</style>
